@@include('include/head.html')
    <style>
        .demo1+.demo1{
            margin-top: 20px;
        }
        .demo-grid {
            padding: 10px;
            line-height: 50px;
            text-align: center;
            background-color: #79C48C;
            color: #fff;
        }

        .grid-bg1 {
            background: #1778a3
        }

        .grid-bg2 {
            background: #1782a3
        }

        .grid-bg3 {
            background: #178ca3
        }

        .grid-bg4 {
            background: #1796a3
        }

        .grid-bg5 {
            background: #17a0a3
        }

        .grid-bg6 {
            background: #17aaa3
        }

        .grid-bg7 {
            background: #17b4a3
        }

        .grid-bg8 {
            background: #17bea3
        }

        .grid-bg9 {
            background: #17c8a3
        }

        .grid-bg10 {
            background: #17d2a3
        }

        .grid-bg11 {
            background: #17dca3
        }

        .grid-bg12 {
            background: #17e6a3
        }
        .aiui-row+.aiui-row{
            margin-top: 10px;
        }
    </style>
    <div class="demo1">
        <div class="aiui-row">
            <div class="aiui-col-xs6">
                <div class="demo-grid grid-bg1">6/12</div>
            </div>
            <div class="aiui-col-xs6">
                <div class="demo-grid grid-bg2">6/12</div>
            </div>
        </div>
        <div class="aiui-row">
            <div class="aiui-col-xs3">
                <div class="demo-grid grid-bg1">3/12</div>
            </div>
            <div class="aiui-col-xs3">
                <div class="demo-grid grid-bg2">3/12</div>
            </div>
            <div class="aiui-col-xs3">
                <div class="demo-grid grid-bg1">3/12</div>
            </div>
            <div class="aiui-col-xs3">
                <div class="demo-grid grid-bg2">3/12</div>
            </div>
        </div>
    </div>
    <h5>移动桌面组合响应</h5>
    <div class="demo1">
        <div class="aiui-row">
            <div class="aiui-col-xs12 aiui-col-md8">
                <div class="demo-grid grid-bg1">移动：12/12、桌面：8/12</div>
            </div>
            <div class="aiui-col-xs6 aiui-col-md4">
                <div class="demo-grid grid-bg2">移动：6/12、桌面：4/12</div>
            </div>
            <div class="aiui-col-xs6 aiui-col-md12">
                <div class="demo-grid grid-bg3">移动：6/12、桌面：12/12</div>
            </div>
        </div>
    </div>
    <h5>流体</h5>
    <div class="demo1">
        <div class="aiui-row">
            <div class="aiui-col-sm3">
                <div class="demo-grid grid-bg1">移动：12/12、桌面：8/12</div>
            </div>
            <div class="aiui-col-sm3">
                <div class="demo-grid grid-bg2">移动：6/12、桌面：4/12</div>
            </div>
            <div class="aiui-col-sm3">
                <div class="demo-grid grid-bg3">移动：6/12、桌面：12/12</div>
            </div>
            <div class="aiui-col-sm3">
                <div class="demo-grid grid-bg3">移动：6/12、桌面：12/12</div>
            </div>
        </div>
    </div>
@@include('include/foot.html')